<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> --- QUIZ --- </title>
	<meta name="viewport" content="width= 1024 height= 600 ,initial-scale=1, maximum-scale=1">
	<link href="css/index.css" rel="stylesheet" />
	<link href="css/lightbox.css" rel="stylesheet"/>
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="js/lightbox.js"></script>
	<script type="text/javascript" src="js/jquery-shuffle.js"></script><script type="text/javascript" src="../js/sound.js"></script>
	<script type="text/javascript">
		var question = 10;
		var qa = new Array();
		var choice = new Array();
		var pic = new Array();
		var ans = new Array();
		var c_choice = new Array();
		var no_choice = new Array();
		var ques_pic = new Array();
		var point = 0;
		
		var choose;
		var i = 0;
		var j;
		var no = 0;
	qa[i] = 'CMS ย่อมาจากอะไร';
			ques_pic[i] = "<a class='size' href='images/13678557414095.jpg' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557414095.jpg' width='150' /></a>";
			
			ans[i] = "2";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "Computer Management System";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557417302.jpg";
				j++;choice[i][j] = "Concept Management System";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557426991.jpg";
				j++;choice[i][j] = "Content Management System";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557426805.jpg";
				j++;choice[i][j] = "Console Management System";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557427401.png";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'ข้อใดที่ไม่ใช่ CMS';
			ques_pic[i] = "<a class='size' href='images/13678557421485.jpg' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557421485.jpg' width='150' /></a>";
			
			ans[i] = "3";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "Joomla!";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557430113.png";
				j++;choice[i][j] = "Drupal";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557434768.png";
				j++;choice[i][j] = "Wordpress";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557437544.png";
				j++;choice[i][j] = "Deamwaver";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557438575.png";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'ต่อไปนี้คือข้อดีของ CMS ยกเว้นข้อใด';
			ques_pic[i] = "<a class='size' href='images/13678557435671.jpg' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557435671.jpg' width='150' /></a>";
			
			ans[i] = "2";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "ผู้ใช้งานไม่จำเป็นต้องมีความรู้เรื่องการทำเว็บไซต์";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557435762.jpg";
				j++;choice[i][j] = "ไม่ต้องเสียเงินจำนวนมาก ";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557431743.jpg";
				j++;choice[i][j] = "เว็บไซต์มีความสวยงามทันสมัย";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557432392.jpg";
				j++;choice[i][j] = "ง่ายต่อการดูแล";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557434069.jpg";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'ข้อใดคือข้อเสียของ CMS';
			ques_pic[i] = "<a class='size' href='images/13678557438275.png' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557438275.png' width='150' /></a>";
			
			ans[i] = "0";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "มีความยุ่งยากในการ set up";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557438207.jpg";
				j++;choice[i][j] = "ราคาแพง";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557437822.jpg";
				j++;choice[i][j] = "ต้องศึกษาภาษาคอมพิวเตอร์ขั้นสูงจึงจะสามารถเข้าใจได้";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557435930.jpg";
				j++;choice[i][j] = "มีระบบจัดการอื่นๆในเว็บไซต์น้อย";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557447038.jpg";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'เราสามารถเปลี่ยนหน้าตาของเว็บไซต์ได้อย่างไร';
			ques_pic[i] = "<a class='size' href='images/13678557447819.jpg' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557447819.jpg' width='150' /></a>";
			
			ans[i] = "3";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "ซื้อชุดรูปแบบจากอินเทอร์เน็ต";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557441025.jpg";
				j++;choice[i][j] = "ดาวน์โหลด Template มาใช้";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557441850.jpg";
				j++;choice[i][j] = "ผิดทั้งสองข้อ";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557441259.jpg";
				j++;choice[i][j] = "ถูกทั้งสองข้อ";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557445662.jpg";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'ทำไม Joomla! จึงเป็น CMS ที่ได้รับความนิยมเป็นอันดับต้นๆ';
			ques_pic[i] = "<a class='size' href='images/13678557444949.jpg' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557444949.jpg' height='150' /></a>";
			
			ans[i] = "1";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "มีระบบดูแลเว็บไซต์ที่ปลอดภัย";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557449806.jpg";
				j++;choice[i][j] = "มีระบบจัดการเนื้อหาที่เป็นรูปแบบสากล";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557448345.png";
				j++;choice[i][j] = "มีต้นแบบมาจากเว็บไซต์ดังๆ";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557451652.PNG";
				j++;choice[i][j] = "เพราะ CMS ตัวอื่นไม่เป็นที่รู้จัก";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557457789.jpg";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'ข้อใดไม่ใช่ Extension ของ Joomla!';
			ques_pic[i] = "<a class='size' href='images/13678557456397.jpg' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557456397.jpg' height='150' /></a>";
			
			ans[i] = "1";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "Module";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557456561.jpg";
				j++;choice[i][j] = "Gadget";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557451346.png";
				j++;choice[i][j] = "Componant";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557452961.jpg";
				j++;choice[i][j] = "Plug-in";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557457675.jpg";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'เว็บไซต์อย่างเป็นทางการของ Joomla! คือข้อใด';
			ques_pic[i] = "<a class='size' href='images/13678557450111.jpg' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557450111.jpg' width='150' /></a>";
			
			ans[i] = "2";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "www.joomla.or.th";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557458645.jpg";
				j++;choice[i][j] = "www.joomlacorner.com";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557454340.jpg";
				j++;choice[i][j] = "www.joomla.org";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557456473.jpg";
				j++;choice[i][j] = "www.joomladee.com";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557459451.jpg";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'Joomla! ปัจจุบันอัพเดทถึงเวอร์ชั่นใด';
			ques_pic[i] = "<a class='size' href='images/13678557457989.png' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557457989.png' width='150' /></a>";
			
			ans[i] = "0";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "3";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557468406.jpg";
				j++;choice[i][j] = "6";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557460710.png";
				j++;choice[i][j] = "9";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557469227.jpg";
				j++;choice[i][j] = "12";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557468633.png";
				j++;c_choice[i] = j;
				 i++;qa[i] = 'หน่วยงานระดับประเทศหน่วยงานใด ที่เลือกใช้ Joomla! ในการทำเว็บไซต์';
			ques_pic[i] = "<a class='size' href='images/13678557460837.gif' rel='lightbox' title='ภาพประกอบข้อที่ "+(i+1)+"'><img src='images/13678557460837.gif' width='150' /></a>";
			
			ans[i] = "3";
			choice[i] = new Array();
			no_choice[i] = new Array();
			pic[i] = new Array();
			
			j = 0;choice[i][j] = "BIOTEC";
				no_choice[i][j] = "0";
				pic[i][j] = "13678557462102.jpg";
				j++;choice[i][j] = "HISO";
				no_choice[i][j] = "1";
				pic[i][j] = "13678557465643.jpg";
				j++;choice[i][j] = "DSI";
				no_choice[i][j] = "2";
				pic[i][j] = "13678557466235.jpg";
				j++;choice[i][j] = "NECTEC";
				no_choice[i][j] = "3";
				pic[i][j] = "13678557466317.jpg";
				j++;c_choice[i] = j;
				 i++;$(document).ready(function(){
			
			document.addEventListener('touchstart', function() {}, false); 
			
			if(point == 0){
				$.jqDialog.alert("<span style='color:#000;'>ขอต้อนรับสู่เกม quiz</span>",
					function() { $('#message').html('YES'); 
						create(no);
						countTime();
						document.getElementById('back_song').play();
						/* SOUND */
					}
				);	
			}
			
			$('#jqDialog_no').click(function(){
				window.location="../index.html";
			});
				
			$('#jqDialog_ok2').click(function(){
				window.location.reload();
			});
		});
		
		
		function finish(){
			document.getElementById('back_song').pause();
			/* SOUND */
			$.jqDialog.alert2("<span style='color:#000;'> คุณทำได้ "+point+" ข้อ จากทั้งหมด "+qa.length+" ข้อ </span>",
				function() { $('#message2').html('YES');
				}
			);	
		}
		
		function create(no){
			$('#question2').css("opacity","1").html(qa[no]);
			$('#pic').html(ques_pic[no]);
			
			$('#answer').html('');
			var correct = ans[no];
			for(j=0;j<c_choice[no];j++){
				$('#answer').append('<div class="choice cborder2"><div class="pic" style="z-index:999;width:50px;height:90px;display: table-cell;vertical-align: middle;"><a class="size" href="images/'+pic[no][j]+'" rel="lightbox" title="'+choice[no][j]+'"><img src="images/'+pic[no][j]+'" alt="" height="50" width="50"/></a></div><div id="'+no_choice[no][j]+'" class="cc" align="left" style="width:230px;height:90px;margin-top:-90px;margin-left:50px;"><div style="height:90px;display: table-cell;vertical-align: middle;"><div style="margin-left:10px;width:210px;">'+choice[no][j]+'</div></div></div></div>');
			}	
			
			$(".cc").click(function(){
				choose = $(this).attr('Id');
				if(choose == correct){
	
					document.getElementById('right').play();
					$('#normal').fadeOut(300);
					$('#happy').fadeIn(300);
					$('#happy').delay(1000).fadeOut(100);
					$('#normal').delay(1000).fadeIn(100);
					point++;
				}
				else{
					document.getElementById('wrong').play();
					$('#normal').fadeOut(600);
					$('#sad').fadeIn(100);
					$('#sad').delay(1000).fadeOut(200);
					$('#normal').fadeIn(200);
				}
					
				if(no == qa.length-1){
					document.getElementById('back_song').pause();
					$('#p_main').fadeOut(400);
					$('#pic').fadeOut(400);
					setTimeout(function() { finish(); }, 400);
					clearTimeout(timerID);
					document.getElementById("cdtime").innerHTML = "0:00:00";
				}
				else{
					$('#p_main').fadeOut(400);
					$('#pic').fadeOut(400);
					$('#p_main').delay(400).fadeIn(400);
					$('#pic').delay(400).fadeIn(400);
					no++;
					setTimeout(function() { create(no); }, 400);		
				}
			});
		}
	
		function countTime(){  
			
			var hoursleft = 0;
			var minutesleft = 15;
			var secondsleft = 0;
			var millisecondsleft = 0;
			end = new Date();
			end.setHours(end.getHours()+hoursleft);
			end.setMinutes(end.getMinutes()+minutesleft);
			end.setSeconds(end.getSeconds()+secondsleft);
			end.setMilliseconds(end.getMilliseconds()+millisecondsleft);
			cd();
			window.onload = cd;
		}
		
			function cd(){
				now = new Date();
				diff = end - now;
				diff = new Date(diff);
				var msec = diff.getMilliseconds();
				var sec = diff.getSeconds();
				var min = diff.getMinutes();
				var hr = diff.getHours()-7;
					if (min < 10){
						min = "0" + min;
					}
					if (sec < 10){
						sec = "0" + sec;
					}
					if(msec < 10){
						msec = "00" +msec;
						msec = msec.substring(0,2);
					}
					else if(msec < 100){
						msec = "0" +msec;
						msec = msec.substring(0,2);
					}
					if(now >= end){
						clearTimeout(timerID);
						
						document.getElementById('back_song').pause();
						$('#p_main').fadeOut("slow");
						$('#pic').fadeOut("slow");
						finish();
						return false;
					}
					else{
						document.getElementById("cdtime").innerHTML = hr + ":" + min + ":" + sec;
					}
				timerID = setTimeout("cd()", 10); 
			}
	</script>
	
	</head>
	<body>
	<div id="bg" style="background:url(images/13678557414688.jpg) no-repeat;background-size:1024px 600px;-moz-background-size:1024px 600px;">
	<!-- AUDIO -->
		<audio id="back_song" loop="loop"><source src="audio/13678557412253.mp3" type="audio/mpeg"></audio>
		<audio id="right"><source src="audio/right.mp3" type="audio/mpeg"></audio>
		<audio id="wrong"><source src="audio/wrong.mp3" type="audio/mpeg"></audio>
		
	<!-- TIME BOX -->
		<div id="timebox" align="center">
			<span id="cdtime"></span>
		</div>
	<!-- ALL -->
		<div id="all" class="cborder" align="center">
			<div style="display: table-cell;height:530px;vertical-align: middle;">
				<div align="left" id="p_main">
				<!-- QUESTION -->
				   <div class="center" align="center">
						<div id="question2" class="cborder2"></div>
				   </div>
				<!-- ANSWER -->
					<div id="answer"></div>
				</div>
			</div>
		</div>
	<!-- KID 
		<div id="kid"></div>
	-->
	<!-- QUES PIC -->
		<div id="quespic" align="center">
			<div id="quespic2"><div id="pic" class="size" style="border:4px solid #FFF;"></div></div>
		</div>
	<!-- GIF -->
		<div id="normal"><img src="images/13678557419944.gif" width="250" height="250" /></div>
		<div id="happy"><img src="images/13678557414746.gif" width="250" height="250"/></div>
		<div id="sad"><img src="images/13678557413536.gif" width="250" height="250"/></div>
	</div>
	<div style="position:absolute;width:1024px;height:40px;top:0px;left:0px;background:#000;background: rgba(0, 0, 0, 0.5);"><a href="../index.html"><img src="../images/back.png" height="40"/></a></div></body>
	</html>